<script setup lang="ts">
import useGetPieData from './useGetPieData'
import BlockItem from '@/components/BlockItem/BlockItem.vue'
import EChart from '@/components/EChart/EChart.vue'

const props = withDefaults(defineProps<{
  title: string
  data: { name: string, value: string | number }[]
}>(), {
  title: '',
  data: () => [],
})

const { pieData } = useGetPieData(() => props.data)
const defaultNumber = inject<(x: any) => string>('defaultNumber')
const chartOption = computed(() => {
  return {
    legend: {
      show: true,
      orient: 'vertical',
      right: '8%',
      bottom: '2%',
      textStyle: {
        color: '#ffffff',
      },
    },
    tooltip: {
      trigger: 'item',
      position: 'right',
      formatter: function pieTooltipFormatter({ color, percent, name, value, data, ...rest }: any) {
        const c = color.colorStops[0].color ?? '#1E2535'
        return `
          <div style="margin: 0;line-height:1;">
            <div style="font-size:14px;color:#f2f2f2;font-weight:400;line-height:1;">${rest.seriesName || name}</div>
            <div style="margin: 10px 0 0;line-height:1;">
              <div style="margin: 0;line-height:1.5;">
                <span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${c};"></span>
                <span style="font-size:14px;color:#f2f2f2;font-weight:400;margin-left:2px">${name}：</span>
                <span style="font-size:14px;color:#f2f2f2;font-weight:900">${defaultNumber ? defaultNumber(value) : value} ${data ? data.unit || '' : ''}（${percent}%）</span>
            </div>
            </div>
          </div>
        `
      },
    },
    series: [
      {
        name: toValue(props.title),
        type: 'pie',
        roseType: 'radius',
        radius: ['40%', '75%'],
        center: ['42%', '50%'],
        labelLine: {
          show: false,
          length: 0,
          length2: 2,
        },
        data: toValue(pieData),
      },
    ],
  }
})
const showFakePie = computed(() => {
  return unref(pieData).some(item => item.value != null)
})
</script>

<template>
  <BlockItem class="energy-structure-pie-chart" :title="title">
    <EChart :option="chartOption" height="25vh" />
    <div v-if="showFakePie" class="fake-pie">
      数据总量
    </div>
  </BlockItem>
</template>

<style scoped>
.energy-structure-pie-chart :deep(.item-body) {
  position: relative;
}
.fake-pie {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  width: 83px;
  height: 83px;
  font-size: 14px;
  background: transparent;
  border-radius: 50%;
  position: absolute;
  left: 42%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 3px solid #1E2535;
  z-index: 10;
}
</style>
